<template>
    <el-badge :value="dataCount" class="item">
        <i class="el-icon-bell" style="color: white; font-size: 20px; cursor: pointer" @click="handleClick"></i>
        <el-drawer
            :modal="false"
            :style="{ top: '50px' }"
            custom-class="my-drawer"
            title="待办事项"
            :visible.sync="drawer"
            :before-close="handleClose"
        >
            <ul>
                <!--                    <li v-for="(item, index) in list" :key="index" @click="decrementCount(index)" style=" cursor:pointer;">{{ item }}</li>-->
                <li @click="decrementCount()">【触发提醒】- 当前存量待办{{ this.old }}条,其中新增待办{{ this.new }}条</li>
            </ul>
        </el-drawer>
    </el-badge>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { TagsViewModule } from '@/store/modules/tags-view';
import { YhRspType } from '@yhfin/biz/common/enum/BaseEnum';
import { IUserInfo, UserModule } from '@/store/modules/user';
import { changePassword, logout } from '@/common/api/sessionAuth';

@Component({})
export default class MessageAlerts extends Vue {
    private drawer: boolean = false;
    private dataCount: any = null; // 待办事项条数
    private selected: any[] = [];
    private list: any[] = ['Item 1', 'Item 2', 'Item 3']; // 你的列表项
    private old: any = null;
    private new: any = null;

    timer: any = null;

    private handleClick() {
        if (this.dataCount > 0) {
            this.drawer = true;
        } else {
            // #40388 【华泰资产】【二期】【生产-待办铃铛】无新事项时点击仍需跳转至待办事项处理菜单【客户禅道ID：127】
            this.goToDisposition();
        }
    }
    private handleClose(done) {
        done();
    }
    // 获取待办事项数据
    private getDispositionList() {
        this.$axios.get('/htscamc/stopLossEvent/login/pop').then((res: any) => {
            let a = res['_1'];
            let b = res['_2'];
            this.old = a;
            this.new = b;
            console.log('存量' + a);
            console.log('新增' + b);
            if (a > 0 || b > 0) {
                this.dataCount = 1;
            }
        });
    }
    // 数据点击事件
    private decrementCount(index) {
        this.dataCount = null;
        this.goToDisposition();
    }
    // 跳转待办事项页面
    private goToDisposition() {
        TagsViewModule.insertVisitedView('/system/pendingProcessing');
    }
    mounted() {
        this.getDispositionList();
        this.timer = setInterval(() => {
            this.getDispositionList();
        }, 3600000);
    }

    beforeDestroy() {
        if (this.timer) {
            this.timer && clearInterval(this.timer);
            this.timer = null;
        }
    }
}
</script>
<style lang="scss" scoped>
/deep/.el-dropdown-link {
    cursor: pointer;
}
li:hover {
    background-color: #e6e6e6;
}
li:active {
    background-color: #cccccc;
}
</style>
